<template>
  <div>
    <table border="1" width="100%">
      <tr v-for="(item, index) in tableData" :key="item.pid">
        <td>{{ index + 1 }}</td>
        <td>{{ item.pname }}</td>
        <td>{{ item.pdes }}</td>
        <td>
          <button type="button" @click="deleteAccess(item.pid)">delete</button>
          <button type="button">modify</button>
          <button type="button">show</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "AccessLayer",
  data() {
    return {
      tableData: [1, 23, 2],
    };
  },
  methods: {
    getAccessList() {
      // this.$axios({
      //   method: "get",
      //   url: this.url + "/access/getAccess",
      //   data: {},
      // }).then((res) => {
      //   // console.log(res);
      //   if (res.data.code === 0) {
      //     // 注意在axios使用时，then()的回调函数中，this是不是指向Vue组件实例。
      //     this.tableData = res.data.data;
      //   } else {
      //     alert(res.data.msg);
      //   }
      // });

      this.$axios
        .get(this.url + "/access/getAccess?id=" + 1)
        // this.$axios
        //   .get(this.url + "/access/getAccess", { params: { id: 1 } })
        .then((res) => {
          // console.log(res);
          if (res.data.code === 0) {
            // 注意在axios使用时，then()的回调函数中，this是不是指向Vue组件实例。
            this.tableData = res.data.data;
          } else {
            alert(res.data.msg);
          }
        });
    },
    deleteAccess(id) {
      console.log("你要删除ID为", id, "的数据");
      this.tableData = this.tableData.filter((el) => {
        return id !== el.pid;
      });
    },
  },
  // VUE生命周期钩子函数，在我们从创建VUE实例化对象-》销毁VUE组件的过程中，VUE通过一个我们介入这个过程的一个接口。
  beforeCreate() {
    console.log("1. beforeCreate");
    // console.log(this.$axios);
    // console.log(this.tableData);  // undefined
  },
  created() {
    console.log("2. created");
    // console.log(this.tableData); // [1, 23, 2]
    this.getAccessList(); // 请求后台
  },
  beforeMount() {
    console.log("3. beforeMount");
  },
  mounted() {
    console.log("4. mounted");
    //  这里就可以拿到正式的DOM节点
  },
  beforeUpdate() {
    console.log("5. beforeUpdate");
  },
  updated() {
    console.log("6. updated");
  },
  beforeDestroy() {
    console.log("7. beforeDestroy");
  },
  destroyed() {
    console.log("8. destoryed");
  },
};
</script>

<style>
</style>